<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="空派" name="first"></el-tab-pane>
    <el-tab-pane label="海派" name="second"></el-tab-pane>
  </el-tabs>
  <customContainer :config="config" />
  <AirDetailDialog ref="airDetailDialogRef" />
</template>
<script lang="ts" setup>
import { ref, computed, defineAsyncComponent } from 'vue'
// import { DictDirection } from '@/store/modules/dicts'
import { ElButton, ElDivider } from 'element-plus'
import { Upload } from '@element-plus/icons-vue'
import { getSummaries } from '@/utils'

const AirDetailDialog = defineAsyncComponent(() => import('./components/AirDetailDialog.vue'))
const activeName = ref('first')
const airDetailDialogRef = ref(null)
const handleDetail = () => {
  airDetailDialogRef.value.open()
}

const handlePush = () => {
  
}

const config = computed({
  get() {
    let queryFields = []
    let tableColumns = []
    let queryParams = {}
        
    if (activeName.value === 'first') {
      // 空派
      tableColumns = [
        { label: '应收总金额', align: 'center', prop: 'marketProducts' },
        { label: '总票数', align: 'center', prop: 'receivingTotalWeight' },
        { label: '总件数', align: 'center', prop: 'receivingTotalWood' },
        { label: '总实重', align: 'center', prop: 'receivingTotalCharging' },
        { label: '总材积重', align: 'center', prop: 'receivingTotal' },
        { label: '总计费重', align: 'center', prop: 'shipmentTotalWeight' },
        { label: '业务员', align: 'center', prop: 'shipmentTotalWood' },
        {
          label: '操作',
          align: 'center',
          width: '200',
          render(h, params) {
            return [
              h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  onClick: () => {
                    handleDetail(params.row)
                  },
                },
                {
                  default: () => '账单详情',
                },
              ),
              h(
                ElDivider,
                {
                  direction: 'vertical',
                },
              ),
              h(
                ElButton,
                {
                  text: true,
                  type: 'primary',
                  onClick: () => {
                    handlePush(params.row)
                  },
                },
                {
                  default: () => '确认推送',
                },
              ),
            ]
          },
        },
      ]
    } else {
      // 海派
      queryFields = [
        {
          // type: 'select',
          label: '回款情况',
          prop: 'hkqk',
          // option: {
          //   dictInfo: { dict: [] },
          // },
        },
        {
          // type: 'select',
          label: '是否开票',
          prop: 'sfkp',
          // option: {
          //   dictInfo: { dict: [] },
          // },
        },
      ]

      tableColumns = [
        { label: '待核销总金额', align: 'center', prop: 'shipmentTotalWeight' },
        { label: '回款情况', align: 'center', prop: 'shipmentTotalWood' },
        { label: '是否开票', align: 'center', prop: 'shipmentTotalWood' },
        {
          label: '操作',
          render(h, params) {
            return h(
              ElButton,
              {
                text: true,
                type: 'primary',
                onClick: () => {
                  // el.clickFun(params.row)
                },
              },
              {
                default: () => '详情',
              },
            )
          },
        },
      ]

      queryParams = {
        hkqk: undefined,
        sfkp: undefined,
      }
    }
    return {
      query: {
        fields: [
          {
            // type: 'select',
            label: '客户名称',
            prop: 'customerCode',
            // option: {
            //   dictInfo: { dict: DictDirection.客户 },
            // },
          },
          {
            label: '账单编号',
            prop: 'zdbh',
          },
          {
            label: '业务员名称',
            prop: 'ywymc',
          },
          ...queryFields,
          {
            type: 'date-picker',
            label: '开始日期',
            prop: 'startTime',
            option: {
              type: 'date',
            },
          },
          {
            type: 'date-picker',
            label: '结束日期',
            prop: 'endTime',
            option: {
              type: 'date',
            },
          },
        ],
        queryParams: {
          pageSize: 10,
          pageNum: 1,
          khmc: undefined,
          zdbh: undefined,
          ywymc: undefined,
          startTime: undefined,
          endTime: undefined,
          ...queryParams,
        },
        formOption: {},
      },
      btns: [
        {
          title: '导出账单',
          type: 'primary',
          icon: Upload,
          onClick(e) {
            console.log(e)
          },
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          { label: '账单时间', align: 'center', prop: 'mainTransferOrderNo' },
          { label: '账单编号', align: 'center', prop: 'transferOrderNo' },
          { label: '客户名称', align: 'center', prop: 'customerName' },
          ...tableColumns,
        ],
        event: {
          showSummary: true,
          summaryMethod: getSummaries(['receivingTotalWeight']),
          onRowClick(e) {
            console.log(e)
          },
        },
      },
      api: (params) => {
        console.log(params, 444)
        
        return Promise.resolve({
          code: 200,
          total: 2,
          data: [{ receivingTotalWeight: 133 }, { receivingTotalWeight: 666 }], 
        })
      },
    }
  },
  set(v) {
    return v
  },
})

</script>
<style lang="less" scoped>
::v-deep.demo-tabs .el-tabs__header {
  background: #fff;
  padding-left: 16px;
}
</style>
